<div id="messages_page" class="page">
  <section class="content-header">
    <h1 data-i18n="messages" style="padding-bottom: 12px;">Messages</h1>
    <!--
      <div style="position:absolute;top:9px;right:9px;">
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select Recipient <span class="caret"></span></button>
          <ul class="dropdown-menu scrollable-menu" role="menu" style="right:0;left:auto;" id="messages_sidebar_menu">
            
          </ul>
        </div>
      </div>
      -->
  </section>
  <section class="content content-stretch" style="position:absolute;margin-top:3px;padding:0; width:100%; height:100%; height: calc(100% - 101px); overflow:hidden;">
    <div class="content-spliter">
      <div class="content-splitter-inner">
        <div class="content-splitter-sidebar" id="message_sidebar" style="width:245px;overflow-x:hidden;">
          <div class="content-splitter-sidebar-inner">
            <div class="list-group unselectable sidebar_context" id="messages_sidebar">
              <div style="text-align:center;padding-top:10px;"><span data-i18n="loading_please_wait">Loading, please wait</span><span id="loading_dots"><span>.</span><span>.</span><span>.</span></span></div>
            </div>
          </div>
        </div>
        <div class="content-splitter-right" id="message_content" style="left:245px">
          <div class="content-splitter-right-inner">
            <div id="no_message_selected" style="padding-top: 150px;text-align:center;" data-i18n="select_contact_in_sidebar">Please select a contact in the left sidebar.</div>
            <div id="no_messages_available" style="padding-top: 150px;text-align:center;display:none;" data-i18n="[html]no_messages_available">No messages available, <a href="#" data-toggle="modal" data-target="#send_message_modal">send one</a>.</div>
            <div id="message_details">
            </div>
            <form role="form" id="inline_message_form" method="post" style="display:none;position:fixed;bottom:0;right:20px;left:485px;" autocomplete="off">
              <div class="form-group">
                <label for="inline_message_text" data-i18n="message">Message</label>
                <textarea class="form-control" name="inline_message_text" id="inline_message_text" rows="3"></textarea>
              </div>
              <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                  <div class="form-group">
                    <input type="password" class="form-control secret_phrase" id="inline_message_password" name="inline_message_password" placeholder="Passphrase" data-i18n="[placeholder]passphrase" style="display:inline;width:35%" autocomplete="">
                    <label for="inline_message_encrypt" style="font-weight:normal;color:#666;" class="margin-left-5">
                      <input type="checkbox" name="encrypt_message" id="inline_message_encrypt" value="1" checked="checked" />
                      <span data-i18n="encrypt_message">Encrypt Message</span>
                    </label>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-5 col-sm-6 col-xs-12">
                  <div class="form-group margin-left-5">
                    <label for="send_message_fee_page" data-i18n="fee">FEE</label>
                    <div class="input-group">
                      <input type="number" name="feeNXT" id="send_message_fee_page" class="form-control" step="any" min="0.00735" placeholder="Fee" data-i18n="[placeholder]fee" data-default="0.1" value="0.1" tabindex="4">
                      <span class="input-group-addon">BURST</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                  <div class="padding-top-5 padding-left-5 font-size-14">
                    <span class="suggested_fee" data-i18n="[title]click_to_refresh">
						<a href="#" class="btn btn-suggested-fee btn-xs" id="suggested_fee_messages_page" data-i18n="suggested_fee">Suggested fee:</a>
					</span>
                    <span id="suggested_fee_response_messages_page" class="suggested_fee margin-left-5"></span>
                    <span class="suggested_fee margin-left-10" data-toggle="tooltip" data-placement="top" data-html="true"  data-i18n="[title]suggested_fee_help"><i class="fa fa-info" aria-hidden="true"></i></span>
                    <span class="suggested_fee margin-left-10 suggested_fee_spinner_display_none" name="suggested_fee_spinner"><i class="fa fa-spinner fa-spin fa-fw text-danger"></i></span>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                  <div class="form-group" style="text-align:right">
                    <input type="hidden" name="inline_message_recipient" id="inline_message_recipient" value="" />
                    <button type="submit" id="inline_message_submit" class="btn btn-default" data-loading-text="Submitting..." data-i18n="send;[data-loading-text]submitting;">Send</button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>